<template>
	<view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 400rpx;">
			<swiper-item v-for="(item,index) in activeDetailData.imgs">
				<image  mode="" :src="image+item" style="height:400rpx;width: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="margin-top">
			<rich-text :nodes="activeDetailData.content"></rich-text>
		</view>
		<rich-text :nodes="next"></rich-text>
		<view @click="isWarp = true" class="radius-xs padding-sm text-center text-white " style="background-color: #DF1414;position: fixed;bottom: 30rpx;left: 100rpx;right: 100rpx;">
			我要报名
		</view>
		<view class="warp align-center rowsc " v-if="isWarp">
			<form @submit="formSubmit">
				<view class="bg-white padding radius ">
					<view class="flex justify-end" @click="isWarp = false">
						<image src="/static/guanbi.png" mode="" style="height: 50rpx;width: 50rpx;"></image>
					</view>
					<view class="rowsb padding-tb-sm solid-bottom">
						<view>
							用户名
						</view>
						<input type="text" value="" placeholder="请输入用户名" style="text-align: right;" name="username" />
					</view>
					<view class="rowsb padding-tb-sm solid-bottom">
						<view>
							手机号
						</view>
						<input type="number" maxlength="11" value="" placeholder="请输入用户名" style="text-align: right;" name="usertel" />
					</view>
					<view class="rowsb padding-tb-sm">
						<view>
							备注
						</view>
						<input type="text" value="" placeholder="请输入备注" style="text-align: right;" name="content" />
					</view>
					<button form-type="submit" class="text-center text-white " style="background-color: #DF1414;">
						我要报名
					</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		activeDetail,
		activityApply
	} from '../../../common/path.js'
	export default {
		data() {
			return {
				next: ' ',
				isWarp: false,
				detailId: '',
				activeDetailData:[] ,//活动详情
				image:''
			}
		},
		onLoad(option) {
			console.log("传过来的id",option.id)
			this.detailId = option.id
			this.activeDetail(option.id)
			this.image = app.image
		},
		methods: {

			activeDetail(id) {
				let data = {
					id: id
				}
				this.$axios.axios('POST', activeDetail, data)
					.then(res => {
						console.log('获取到的活动祥',res.data);
						this.activeDetailData = res.data
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 报名
			formSubmit(e) {
				if (this.$tools.fordataInfo(e.detail.value)) {
					e.detail.value.uid = app.userInfo.id;
					e.detail.value.pid = this.detailId
					this.$axios.axios('POST', activityApply, e.detail.value)
						.then(res => {
							if (res.status == 1) {
								this.$tools.showToast('提交成功')
								this.isWarp = false
							} else {
								this.$tools.showToast('失败')
							}
						})
				} 
			},
		}
	}
</script>

<style>
.warp {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}
</style>
